import React, { Component } from 'react';
import { Icon, Input, Button, Table, message, Popconfirm } from 'antd';
import AddForm from './AddForm';
import EditForm from './EditForm';
import axios from 'axios';
import './index.less';
const Search = Input.Search;


class Type extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      infor: {}
    };
  }
  getUserTypes = () => {
    const $this = this;
    const Token = sessionStorage.getItem('token');
    axios({
      method: 'get',
      url: '/api/admin/groupType/all',
      headers: {
        Authorization: Token
      }
    }).then(function (response) {
      $this.setState({
        data: response.data
      });
    }).catch(function (error) {
      message.error('请求失败，请稍后重试');
    });

  }
  // 条件搜索
  searchUser = (value) => {
    const $this = this;
    const Token = sessionStorage.getItem('token');
    axios({
      method: 'get',
      url: '/api/admin/groupType',
      headers: {
        Authorization: Token
      },
      params: {
        name: value
      }
    }).then(function (response) {
      $this.setState({
        data: response.data
      });
    }).catch(function (error) {
      message.error('请求失败，请稍后重试');
    });

  }
  showAddForm = () => { this.setState({ addFormVisible: true, }) }
  hideAddForm = () => { this.setState({ addFormVisible: false, }) }
  showEditForm = (a) => { this.setState({ editFormVisible: true, infor: a }) }
  hideEditForm = (a) => { this.setState({ infor: a, editFormVisible: false }) }
  // 添加用户
  handleCreate = () => {
    const form = this.formRef1.props.form;
    form.validateFields((err, values) => {
      if (err) {
        console.log('err');
        return;
      }
      const $this = this;
      const Token = sessionStorage.getItem('token');
      axios({
        method: 'post',
        url: '/api/admin/groupType',
        headers: {
          Authorization: Token
        },
        data: values
      })
        .then(function (response) {
          message.success('添加成功');
          $this.getUserTypes();
        })
        .catch(function (error) {
          message.error('请求失败，请稍后重试');
        });
      form.resetFields();
      this.setState({ addFormVisible: false });
    });
  }
  // 删除用户
  deleteUserTypes = (id) => {
    const $this = this;
    const Token = sessionStorage.getItem('token');
    axios({
      method: 'delete',
      url: '/api/admin/groupType/' + id,
      headers: {
        Authorization: Token
      }
    }).then(function (response) {
      message.success('删除成功');
      $this.getUserTypes();
    }).catch(function (error) {
      message.error('请求失败，请稍后重试');
    });
  }
  // 编辑用户
  EditUserTypes = (id) => {
    const form = this.formRef2.props.form;
    form.validateFields((err, values) => {
      if (err) {
        console.log('err');
        return;
      }
      if (id != undefined) {
        const $this = this;
        const Token = sessionStorage.getItem('token');
        const dataValues = values;
        dataValues.id = id;
        axios({
          method: 'put',
          url: '/api/admin/groupType/' + id,
          headers: {
            Authorization: Token
          },
          data: dataValues,
        }).then(function (response) {
          message.success('更新成功');
          $this.getUserTypes();
        }).catch(function (error) {
          message.error('请求失败，请稍后重试');
        });
      }
    });
    form.resetFields();
    this.setState({ editFormVisible: false });
  }
  saveFormRef = (formRef) => {
    this.formRef1 = formRef;
  }
  saveFormRef2 = (formRef) => {
    this.formRef2 = formRef;
  }
  componentWillMount() {
    this.getUserTypes();
  }
  render() {

    const columns = [{
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
    }, {
      title: '类型名称',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    }, {
      title: '最后更新时间',
      dataIndex: 'updTime',
      key: 'updTime',
    }, {
      title: '最后更新人',
      dataIndex: 'updName',
      key: 'updName',
    }, {
      title: '最后更新主机',
      dataIndex: 'updHost',
      key: 'updHost',
    }, {
      title: '操作',
      key: '操作',
      render: (text, record) => (
        <span>
          <Button type="primary" size="small" onClick={() => this.showEditForm(record)} >编辑</Button>
          {/* <Button type="danger" size="small" onClick={()=>this.deleteUser(record.id)}>删除</Button> */}
          <Popconfirm title="此操作将永久删除, 是否继续?" okText="确认" cancelText="取消" onConfirm={() => this.deleteUserTypes(record.id)}>
            <Button type="danger" size="small" >删除</Button>
          </Popconfirm>
        </span>
      ),
    }];
    return (
      <div>
        <div className="index-buttons">
          <Search placeholder="编码" onSearch={value => this.searchUser(value)} enterButton size="large" style={{ width: 260 }} />
          <Button type="primary" size="large" icon="edit" onClick={this.showAddForm}>添加</Button>
        </div>
        <Table columns={columns} dataSource={this.state.data} rowKey="id" bordered />
        <AddForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.addFormVisible}
          onCancel={this.hideAddForm}
          onCreate={this.handleCreate}
        />
        {
          this.state.infor ? <EditForm
            wrappedComponentRef={this.saveFormRef2}
            visible={this.state.editFormVisible}
            infor={this.state.infor}
            onCancel={() => this.hideEditForm('')}
            onCreate={() => this.EditUserTypes(this.state.infor.id)}

          />
          : ''
        }
      </div>


    );
  }
}

export default Type;
